<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3d立方体</title>
    <style>
        .container {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
            outline: 1px solid red;
            background-color: rgba(255, 236, 202, 0.397);
            /* transition: 2s; */
            perspective: 500px;
            transform-style: preserve-3d;
            
        }
        .face{
            width: 200px;
            height: 200px;
            background-color: rgb(243, 167, 167);
            position: absolute;
            left: 100px;
            top: 100px;
            text-align: center;
            font: bold 2em/200px '微软雅黑';
            color: whitesmoke;
            transition: 1s;
            opacity: 0.5;
        }
        .container:hover .front{
            transform: translateZ(100px);
            background-color: rgb(247, 184, 184);
        }
        .container:hover .back{
            transform: rotateY(180deg) translateZ(100px);
            background-color: rgb(217, 233, 160);
            transition-delay: 1s;
        }
        .container:hover .left{
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgb(164, 247, 201);
            transition-delay: 2s;
        }
        .container:hover .right{
            transform: rotateY(-90deg) translateZ(100px);
            background-color: rgb(104, 106, 241);
            transition-delay: 3s;
        }
        .container:hover .top{
            transform: rotateX(90deg) translateZ(100px);
            background-color: rgb(236, 104, 241);
            transition-delay: 4s;
        }
        .container:hover .bottom{
            transform: rotateX(-90deg) translateZ(100px);
            background-color: rgb(57, 148, 95);
            transition-delay: 5s;
        }
    </style>
</head>

<body>
   <div class="container">
       <div class="face front">
           front
       </div>
       <div class="face back">
           back
       </div>
       <div class="face left">
           left
       </div>
       <div class="face right">
           right
       </div>
       <div class="face top">
           top
       </div>
       <div class="face bottom">
           bottom
       </div>
   </div>
</body>

</html>